import React, { PureComponent } from 'react';
import styled from 'styled-components';

const StatsContainer = styled.div`
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0.1rem;
  height: calc(100% - 0.6rem);
  margin-top: 0.08rem;
`;

const StatCard = styled.div`
  background: linear-gradient(135deg, rgba(0, 102, 255, 0.1) 0%, rgba(0, 204, 255, 0.1) 100%);
  border: 1px solid rgba(0, 153, 255, 0.3);
  border-radius: 0.08rem;
  padding: 0.1rem;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;

  &:hover {
    border-color: rgba(0, 255, 255, 0.8);
    box-shadow: 0 0 0.15rem rgba(0, 255, 255, 0.3);
    transform: translateY(-0.02rem);
    
    .stat-value {
      color: #ffffff;
      text-shadow: 0 0 0.15rem rgba(0, 255, 255, 0.8);
    }
    
    &::before {
      opacity: 1;
    }
  }

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
    opacity: 0;
  }

  &:hover::before {
    left: 100%;
  }
`;

const StatLabel = styled.div`
  font-size: 0.12rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0.05rem;
  font-weight: 400;
`;

const StatValue = styled.div`
  font-size: 0.24rem;
  color: #00ffff;
  font-weight: bold;
  text-shadow: 0 0 0.1rem rgba(0, 255, 255, 0.5);
  transition: all 0.3s ease;
`;

class UserBehaviorStats extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      animatedValues: {},
    };
  }

  componentDidMount() {
    this.animateValues();
  }

  // 数值动画效果
  animateValues = () => {
    const { data } = this.props;
    if (!data) return;

    Object.keys(data).forEach((key, index) => {
      setTimeout(() => {
        const targetValue = parseFloat(data[key].value);
        this.animateValue(key, 0, targetValue, 1500);
      }, index * 200);
    });
  };

  animateValue = (key, start, end, duration) => {
    let startTimestamp = null;
    const step = (timestamp) => {
      if (!startTimestamp) startTimestamp = timestamp;
      const progress = Math.min((timestamp - startTimestamp) / duration, 1);
      const current = progress * (end - start) + start;
      
      this.setState(prevState => ({
        animatedValues: {
          ...prevState.animatedValues,
          [key]: current
        }
      }));

      if (progress < 1) {
        window.requestAnimationFrame(step);
      }
    };
    window.requestAnimationFrame(step);
  };

  formatValue = (key, value) => {
    const { data } = this.props;
    if (!data || !data[key]) return '0';

    const originalValue = data[key].value;
    
    // 根据原始数据格式化显示
    if (originalValue.includes('.')) {
      return value.toFixed(4);
    } else if (parseInt(originalValue, 10) > 1000) {
      return Math.round(value).toLocaleString();
    } else {
      return Math.round(value).toString();
    }
  };

  render() {
    const { data } = this.props;
    const { animatedValues } = this.state;
    
    if (!data) return null;

    return (
      <StatsContainer>
        {Object.entries(data).map(([key, item]) => (
          <StatCard key={key}>
            <StatLabel>{item.label}</StatLabel>
            <StatValue className="stat-value">
              {this.formatValue(key, animatedValues[key] || 0)}
            </StatValue>
          </StatCard>
        ))}
      </StatsContainer>
    );
  }
}

export default UserBehaviorStats; 